<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>房屋出租商城 - 管理端</title>
  <!-- 引入外部资源 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: "#165DFF",
            secondary: "#36CFC9",
            success: "#52C41A",
            warning: "#FAAD14",
            danger: "#FF4D4F",
            gray: {
              100: "#F5F5F5",
              200: "#E5E5E5",
              300: "#D4D4D4",
              400: "#A3A3A3",
              500: "#737373",
              600: "#525252",
              700: "#404040",
              800: "#262626",
              900: "#171717",
            }
          },
          fontFamily: {
            inter: ["Inter", "system-ui", "sans-serif"],
          },
        },
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .sidebar-item {
        @apply flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-primary/10 hover:text-primary rounded-lg transition-all duration-200;
      }
      .sidebar-item.active {
        @apply bg-primary/10 text-primary font-medium;
      }
      .btn {
        @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 flex items-center gap-2;
      }
      .btn-primary {
        @apply bg-primary text-white hover:bg-primary/90;
      }
      .btn-success {
        @apply bg-success text-white hover:bg-success/90;
      }
      .btn-danger {
        @apply bg-danger text-white hover:bg-danger/90;
      }
      .btn-outline {
        @apply border border-gray-300 text-gray-700 hover:bg-gray-100;
      }
      .card {
        @apply bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden;
      }
      .form-input {
        @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all;
      }
      .form-label {
        @apply block text-sm font-medium text-gray-700 mb-1;
      }
    }
  </style>
</head>

<body class="font-inter bg-gray-100 text-gray-800 min-h-screen flex overflow-hidden">
  <!-- 侧边栏 -->
  <aside id="sidebar" class="w-64 bg-white border-r border-gray-200 h-screen flex-shrink-0 hidden md:block transition-all duration-300">
    <div class="p-5 border-b border-gray-200">
      <h1 class="text-xl font-bold text-primary flex items-center gap-2">
        <i class="fa fa-home"></i>
        <span>房屋出租管理系统</span>
      </h1>
    </div>
    
    <nav class="p-4 space-y-1">
      <p class="text-xs font-medium text-gray-400 uppercase px-4 mb-2">主菜单</p>
      
      <a href="#" class="sidebar-item">
        <i class="fa fa-dashboard w-5 text-center"></i>
        <span>仪表盘</span>
      </a>
      
      <a href="#" class="sidebar-item active">
        <i class="fa fa-building w-5 text-center"></i>
        <span>房屋管理</span>
      </a>
      
      <a href="#" class="sidebar-item">
        <i class="fa fa-users w-5 text-center"></i>
        <span>用户管理</span>
      </a>
      
      <a href="#" class="sidebar-item">
        <i class="fa fa-calendar-check-o w-5 text-center"></i>
        <span>订单管理</span>
      </a>
      
      <a href="#" class="sidebar-item">
        <i class="fa fa-comments w-5 text-center"></i>
        <span>评价管理</span>
      </a>
      
      <p class="text-xs font-medium text-gray-400 uppercase px-4 mb-2 mt-6">系统</p>
      
      <a href="#" class="sidebar-item">
        <i class="fa fa-cog w-5 text-center"></i>
        <span>系统设置</span>
      </a>
      
      <a href="#" class="sidebar-item">
        <i class="fa fa-question-circle w-5 text-center"></i>
        <span>帮助中心</span>
      </a>
    </nav>
  </aside>

  <!-- 主内容区 -->
  <div class="flex-1 flex flex-col overflow-hidden">
    <!-- 顶部导航 -->
    <header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6">
      <div class="flex items-center gap-4">
        <button id="sidebar-toggle" class="md:hidden text-gray-600 hover:text-primary">
          <i class="fa fa-bars text-xl"></i>
        </button>
        <div class="relative">
          <input type="text" placeholder="搜索..." class="form-input pl-10 w-64">
          <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
        </div>
      </div>
      
      <div class="flex items-center gap-6">
        <button class="relative text-gray-600 hover:text-primary">
          <i class="fa fa-bell text-xl"></i>
          <span class="absolute -top-1 -right-1 w-4 h-4 bg-danger text-white text-xs rounded-full flex items-center justify-center">3</span>
        </button>
        
        <div class="flex items-center gap-3">
          <img src="https://picsum.photos/id/1005/40/40" alt="管理员头像" class="w-8 h-8 rounded-full object-cover">
          <div class="hidden md:block">
            <p class="text-sm font-medium">管理员</p>
            <p class="text-xs text-gray-500">admin@example.com</p>
          </div>
          <i class="fa fa-chevron-down text-xs text-gray-500"></i>
        </div>
      </div>
    </header>

    <!-- 页面内容 -->
    <main class="flex-1 overflow-y-auto p-6">
      <!-- 页面标题 -->
      <div class="mb-6">
        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">房屋管理</h2>
        <p class="text-gray-500 mt-1">管理所有房屋信息，包括上架、下架、编辑等操作</p>
      </div>
      
      <!-- 操作按钮区 -->
      <div class="flex flex-wrap items-center justify-between gap-4 mb-6">
        <div class="flex flex-wrap gap-3">
          <button id="add-house-btn" class="btn btn-primary">
            <i class="fa fa-plus"></i>
            <span>新增房屋</span>
          </button>
          
          <div class="relative">
            <select class="form-input pl-3 pr-10 appearance-none bg-white">
              <option value="">全部状态</option>
              <option value="active">已上架</option>
              <option value="inactive">已下架</option>
            </select>
            <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none"></i>
          </div>
        </div>
        
        <div class="flex items-center gap-3">
          <div class="relative">
            <input type="text" id="searchName" placeholder="搜索房屋..." class="form-input pl-10 w-64">
            <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" id="searchBtn"></i>
          </div>
        </div>
      </div>
      
      <!-- 房屋列表 -->
      <div class="card mb-6">
        <div class="overflow-x-auto">
          <table class="w-full">
            <thead>
              <tr class="bg-gray-50 text-left">
                <th class="px-6 py-4 text-sm font-medium text-gray-600">ID</th>
                <th class="px-6 py-4 text-sm font-medium text-gray-600">房屋图片</th>
                <th class="px-6 py-4 text-sm font-medium text-gray-600">房屋名称</th>
                <th class="px-6 py-4 text-sm font-medium text-gray-600">价格(元/月)</th>
                <th class="px-6 py-4 text-sm font-medium text-gray-600">面积(㎡)</th>
                <th class="px-6 py-4 text-sm font-medium text-gray-600">地址</th>
                <th class="px-6 py-4 text-sm font-medium text-gray-600">状态</th>
                <th class="px-6 py-4 text-sm font-medium text-gray-600">操作</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-200" id="tableData">
              &lt;!&ndash; 房屋数据行 &ndash;&gt;
              <!--  <tr class="hover:bg-gray-50 transition-colors">
                  <td class="px-6 py-4 text-sm text-gray-700">#H001</td>
                  <td class="px-6 py-4">
                    <img src="https://picsum.photos/id/1048/80/60" alt="现代公寓" class="w-20 h-16 object-cover rounded">
                  </td>
                  <td class="px-6 py-4 text-sm font-medium">现代风格一居室公寓</td>
                  <td class="px-6 py-4 text-sm text-gray-700">3200</td>
                  <td class="px-6 py-4 text-sm text-gray-700">65</td>
                  <td class="px-6 py-4 text-sm text-gray-700">北京市朝阳区建国路88号</td>
                  <td class="px-6 py-4">
                    <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">已上架</span>
                  </td>
                  <td class="px-6 py-4">
                    <div class="flex items-center gap-2">
                      <button class="text-primary hover:text-primary/80 p-1" title="编辑">
                        <i class="fa fa-edit"></i>
                      </button>
                      <button class="text-danger hover:text-danger/80 p-1下架-btn" data-id="H001" title="下架">
                        <i class="fa fa-ban"></i>
                      </button>
                      <button class="text-gray-600 hover:text-gray-800 p-1" title="查看详情">
                        <i class="fa fa-eye"></i>
                      </button>
                    </div>
                  </td>
                </tr>

                <tr class="hover:bg-gray-50 transition-colors">
                  <td class="px-6 py-4 text-sm text-gray-700">#H002</td>
                  <td class="px-6 py-4">
                    <img src="https://picsum.photos/id/164/80/60" alt="豪华两居室" class="w-20 h-16 object-cover rounded">
                  </td>
                  <td class="px-6 py-4 text-sm font-medium">豪华两居室</td>
                  <td class="px-6 py-4 text-sm text-gray-700">5800</td>
                  <td class="px-6 py-4 text-sm text-gray-700">92</td>
                  <td class="px-6 py-4 text-sm text-gray-700">上海市浦东新区张江高科技园区</td>
                  <td class="px-6 py-4">
                    <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">已上架</span>
                  </td>
                  <td class="px-6 py-4">
                    <div class="flex items-center gap-2">
                      <button class="text-primary hover:text-primary/80 p-1" title="编辑">
                        <i class="fa fa-edit"></i>
                      </button>
                      <button class="text-danger hover:text-danger/80 p-1下架-btn" data-id="H002" title="下架">
                        <i class="fa fa-ban"></i>
                      </button>
                      <button class="text-gray-600 hover:text-gray-800 p-1" title="查看详情">
                        <i class="fa fa-eye"></i>
                      </button>
                    </div>
                  </td>
                </tr>

                <tr class="hover:bg-gray-50 transition-colors">
                  <td class="px-6 py-4 text-sm text-gray-700">#H003</td>
                  <td class="px-6 py-4">
                    <img src="https://picsum.photos/id/239/80/60" alt="复古三居室" class="w-20 h-16 object-cover rounded">
                  </td>
                  <td class="px-6 py-4 text-sm font-medium">复古风格三居室</td>
                  <td class="px-6 py-4 text-sm text-gray-700">7500</td>
                  <td class="px-6 py-4 text-sm text-gray-700">120</td>
                  <td class="px-6 py-4 text-sm text-gray-700">广州市天河区珠江新城</td>
                  <td class="px-6 py-4">
                    <span class="px-2 py-1 text-xs font-medium bg-gray-200 text-gray-700 rounded-full">已下架</span>
                  </td>
                  <td class="px-6 py-4">
                    <div class="flex items-center gap-2">
                      <button class="text-primary hover:text-primary/80 p-1" title="编辑">
                        <i class="fa fa-edit"></i>
                      </button>
                      <button class="text-success hover:text-success/80 p-1上架-btn" data-id="H003" title="上架">
                        <i class="fa fa-check-circle"></i>
                      </button>
                      <button class="text-gray-600 hover:text-gray-800 p-1" title="查看详情">
                        <i class="fa fa-eye"></i>
                      </button>
                    </div>
                  </td>
                </tr>

                <tr class="hover:bg-gray-50 transition-colors">
                  <td class="px-6 py-4 text-sm text-gray-700">#H004</td>
                  <td class="px-6 py-4">
                    <img src="https://picsum.photos/id/429/80/60" alt="简约loft" class="w-20 h-16 object-cover rounded">
                  </td>
                  <td class="px-6 py-4 text-sm font-medium">简约LOFT公寓</td>
                  <td class="px-6 py-4 text-sm text-gray-700">4500</td>
                  <td class="px-6 py-4 text-sm text-gray-700">78</td>
                  <td class="px-6 py-4 text-sm text-gray-700">深圳市南山区科技园</td>
                  <td class="px-6 py-4">
                    <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">已上架</span>
                  </td>
                  <td class="px-6 py-4">
                    <div class="flex items-center gap-2">
                      <button class="text-primary hover:text-primary/80 p-1" title="编辑">
                        <i class="fa fa-edit"></i>
                      </button>
                      <button class="text-danger hover:text-danger/80 p-1下架-btn" data-id="H004" title="下架">
                        <i class="fa fa-ban"></i>
                      </button>
                      <button class="text-gray-600 hover:text-gray-800 p-1" title="查看详情">
                        <i class="fa fa-eye"></i>
                      </button>
                    </div>
                  </td>
                </tr>

                <tr class="hover:bg-gray-50 transition-colors">
                  <td class="px-6 py-4 text-sm text-gray-700">#H005</td>
                  <td class="px-6 py-4">
                    <img src="https://picsum.photos/id/437/80/60" alt="花园别墅" class="w-20 h-16 object-cover rounded">
                  </td>
                  <td class="px-6 py-4 text-sm font-medium">花园别墅</td>
                  <td class="px-6 py-4 text-sm text-gray-700">18000</td>
                  <td class="px-6 py-4 text-sm text-gray-700">280</td>
                  <td class="px-6 py-4 text-sm text-gray-700">杭州市西湖区西溪湿地公园附近</td>
                  <td class="px-6 py-4">
                    <span class="px-2 py-1 text-xs font-medium bg-gray-200 text-gray-700 rounded-full">已下架</span>
                  </td>
                  <td class="px-6 py-4">
                    <div class="flex items-center gap-2">
                      <button class="text-primary hover:text-primary/80 p-1" title="编辑">
                        <i class="fa fa-edit"></i>
                      </button>
                      <button class="text-success hover:text-success/80 p-1上架-btn" data-id="H005" title="上架">
                        <i class="fa fa-check-circle"></i>
                      </button>
                      <button class="text-gray-600 hover:text-gray-800 p-1" title="查看详情">
                        <i class="fa fa-eye"></i>
                      </button>
                    </div>
                  </td>
                </tr>-->
            </tbody>
          </table>
        </div>
        
        <!-- 分页 -->
        <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
          <p class="text-sm text-gray-500">显示 1 到 5 条，共 24 条</p>
          
          <div class="flex items-center gap-1">
            <button class="w-9 h-9 flex items-center justify-center rounded border border-gray-300 text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
              <i class="fa fa-chevron-left text-xs"></i>
            </button>
            <button class="w-9 h-9 flex items-center justify-center rounded bg-primary text-white">1</button>
            <button class="w-9 h-9 flex items-center justify-center rounded border border-gray-300 hover:bg-gray-50">2</button>
            <button class="w-9 h-9 flex items-center justify-center rounded border border-gray-300 hover:bg-gray-50">3</button>
            <button class="w-9 h-9 flex items-center justify-center rounded border border-gray-300 hover:bg-gray-50">4</button>
            <button class="w-9 h-9 flex items-center justify-center rounded border border-gray-300 hover:bg-gray-50">5</button>
            <button class="w-9 h-9 flex items-center justify-center rounded border border-gray-300 text-gray-700 hover:bg-gray-50">
              <i class="fa fa-chevron-right text-xs"></i>
            </button>
          </div>
        </div>
      </div>
    </main>
  </div>
  
  <!-- 新增/编辑房屋模态框 -->
  <div id="house-modal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center p-4">
    <div class="card w-full max-w-4xl max-h-[90vh] overflow-y-auto">
      <div class="p-6 border-b border-gray-200 flex items-center justify-between">
        <h3 class="text-lg font-bold" id="modal-title">新增房屋</h3>
        <button id="close-modal" class="text-gray-500 hover:text-gray-700">
          <i class="fa fa-times text-xl"></i>
        </button>
      </div>
      
      <div class="p-6">
        <form id="house-form">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- 基本信息 -->
            <div>
              <h4 class="text-sm font-medium text-gray-700 mb-4">基本信息</h4>
              
              <div class="mb-4">
                <label class="form-label">房屋名称</label>
                <input type="text" name="name" id="name" class="form-input" placeholder="请输入房屋名称">
              </div>
              
              <div class="mb-4">
                <label class="form-label">所在城市</label>
                <select name="city" id="city" class="form-input">
                  <option value="">请选择城市</option>
                  <option value="beijing">北京市</option>
                  <option value="shanghai">上海市</option>
                  <option value="guangzhou">广州市</option>
                  <option value="shenzhen">深圳市</option>
                  <option value="hangzhou">杭州市</option>
                </select>
              </div>
              
              <div class="mb-4">
                <label class="form-label">详细地址</label>
                <input type="text" id="address" name="address" class="form-input" placeholder="请输入详细地址">
              </div>
              
              <div class="mb-4">
                <label class="form-label">租金(元/月)</label>
                <input type="number" id="price" name="price" class="form-input" placeholder="请输入租金">
              </div>
              
              <div class="mb-4">
                <label class="form-label">房屋面积(㎡)</label>
                <input type="number" id="area" name="area" class="form-input" placeholder="请输入房屋面积">
              </div>
              
              <div class="mb-4">
                <label class="form-label">户型</label>
                <select name="type" id="type" class="form-input">
                  <option value="">请选择户型</option>
                  <option value="1">一居室</option>
                  <option value="2">两居室</option>
                  <option value="3">三居室</option>
                  <option value="4">四居室及以上</option>
                  <option value="loft">LOFT</option>
                  <option value="villa">别墅</option>
                </select>
              </div>
            </div>
            
            <!-- 其他信息 -->
            <div>
              <h4 class="text-sm font-medium text-gray-700 mb-4">其他信息</h4>
              
              <div class="mb-4">
                <label class="form-label">房屋描述</label>
                <textarea name="description" id="description" rows="4" class="form-input" placeholder="请输入房屋描述"></textarea>
              </div>
              
              <div class="mb-4">
                <label class="form-label">房屋图片</label>
                <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-primary transition-colors cursor-pointer">
                  <input type="file" id="image-upload" name="file" class="hidden" accept="image/*" ><!--multiple-->
                  <label for="image-upload" class="cursor-pointer">
                    <i class="fa fa-cloud-upload text-2xl text-gray-400 mb-2"></i>
                    <p class="text-sm text-gray-500">点击上传图片或拖拽图片到此处</p>
                    <p class="text-xs text-gray-400 mt-1">支持 JPG、PNG 格式，最多上传5张</p>
                  </label>
                </div>
                
                <!-- 已上传图片预览区 -->
                <div id="image-preview" class="mt-3 flex flex-wrap gap-2 hidden">
                  <!-- 示例图片 -->
                  <div class="relative w-20 h-20 rounded overflow-hidden">
                    <img src="https://picsum.photos/id/1048/80/80" alt="房屋图片" class="w-full h-full object-cover" id="backImg">
                    <button class="absolute top-1 right-1 w-5 h-5 bg-black/50 text-white rounded-full flex items-center justify-center hover:bg-black/70">
                      <i class="fa fa-times text-xs"></i>
                    </button>
                  </div>
                </div>
              </div>
              
              <div class="mb-4">
                <label class="form-label">房屋状态</label>
                <div class="flex items-center gap-4">
                  <label class="inline-flex items-center gap-2 cursor-pointer">
                    <input type="radio" name="status" value="active" class="w-4 h-4 text-primary focus:ring-primary" checked>
                    <span>上架</span>
                  </label>
                  <label class="inline-flex items-center gap-2 cursor-pointer">
                    <input type="radio" name="status" value="inactive" class="w-4 h-4 text-primary focus:ring-primary">
                    <span>下架</span>
                  </label>
                </div>
              </div>
              
              <div class="mb-4">
                <label class="form-label">配套设施</label>
                <div class="grid grid-cols-2 gap-2">
                  <label class="inline-flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" name="facility" value="wifi" class="w-4 h-4 text-primary focus:ring-primary">
                    <span>WiFi</span>
                  </label>
                  <label class="inline-flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" name="facility" value="parking" class="w-4 h-4 text-primary focus:ring-primary">
                    <span>停车位</span>
                  </label>
                  <label class="inline-flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" name="facility" value="elevator" class="w-4 h-4 text-primary focus:ring-primary">
                    <span>电梯</span>
                  </label>
                  <label class="inline-flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" name="facility" value="air-conditioner" class="w-4 h-4 text-primary focus:ring-primary">
                    <span>空调</span>
                  </label>
                  <label class="inline-flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" name="facility" value="water-heater" class="w-4 h-4 text-primary focus:ring-primary">
                    <span>热水器</span>
                  </label>
                  <label class="inline-flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" name="facility" value="washing-machine" class="w-4 h-4 text-primary focus:ring-primary">
                    <span>洗衣机</span>
                  </label>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
      
      <div class="p-6 border-t border-gray-200 flex items-center justify-end gap-3">
        <button id="cancel-modal" class="btn btn-outline">取消</button>
        <button id="save-house" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
  
  <!-- 确认操作模态框 -->
  <div id="confirm-modal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center p-4">
    <div class="card w-full max-w-md">
      <div class="p-6 border-b border-gray-200">
        <h3 class="text-lg font-bold" id="confirm-title">确认下架</h3>
      </div>
      
      <div class="p-6">
        <p id="confirm-message" class="text-gray-600">您确定要将此房屋下架吗？下架后用户将无法看到该房屋。</p>
      </div>
      
      <div class="p-6 border-t border-gray-200 flex items-center justify-end gap-3">
        <button id="cancel-confirm" class="btn btn-outline">取消</button>
        <button id="confirm-action" class="btn btn-danger">确认</button>
      </div>
    </div>
  </div>
  
  <!-- 通知提示框 -->
  <div id="toast" class="fixed top-4 right-4 z-50 transform translate-x-full transition-transform duration-300 bg-white shadow-lg rounded-lg p-4 max-w-sm flex items-start gap-3">
    <div id="toast-icon" class="text-success mt-0.5">
      <i class="fa fa-check-circle text-xl"></i>
    </div>
    <div>
      <h4 class="font-medium" id="toast-title">操作成功</h4>
      <p class="text-sm text-gray-600 mt-1" id="toast-message">房屋已成功下架</p>
    </div>
    <button id="close-toast" class="text-gray-400 hover:text-gray-600 ml-auto">
      <i class="fa fa-times"></i>
    </button>
  </div>

  <script src="../js/main.js"></script>
  <script src="../js/jquery-3.4.1.min.js"></script>
  <script>
    const baseUrl="http://localhost:8080/HouseSaleSystem/"
    function loadInit(keywords){
      $.ajax({
        url: baseUrl+"admin/page",
        type:"get",

        data: {
          pageSize: 10,
          pageNum: 1,
          keywords,
        },
        //beforeSend: function (xhr) {
        // 在所有发送请求的操作（open, send）之前执行
        // console.log("beforeSend", xhr);
        // },
        success: function (res) {
          // 只有请求成功（状态码为200）才会执行这个函数
          console.log(res);
          let data=res.data.list;
          console.log(data.length)
          let tableData=$("#tableData");
          tableData.empty();
          //debugger
          for(let i=0;i<parseInt(data.length);i++){
            let imgUrl=baseUrl+data[i].pic;
            console.log(imgUrl)
            //let shuju=$(`<tr class=\"hover:bg-gray-50 transition-colors\"><td class=\"px-6 py-4\"><img src=\"${imgUrl}\" alt=\"现代公寓\" class=\"w-20 h-16 object-cover rounded\"></td></tr>`)
            let shuju=$(`<tr class="hover:bg-gray-50 transition-colors">\n
                                    <td class="px-6 py-4 text-sm text-gray-700">${data[i].orderNum}</td>\n
                                    <td class="px-6 py-4">\n
                                      <img src="${imgUrl}" alt="现代公寓" class="w-20 h-16 object-cover rounded">\n
                                    </td>\n
                                    <td class="px-6 py-4 text-sm font-medium">${data[i].name}</td>\n
                                    <td class="px-6 py-4 text-sm text-gray-700">${data[i].price}</td>\n
                                    <td class="px-6 py-4 text-sm text-gray-700">${data[i].area}</td>\n
                                    <td class="px-6 py-4 text-sm text-gray-700">${data[i].place}</td>\n
                                    <td class="px-6 py-4">\n
                                      <span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">${data[i].state}</span>\n
                                    </td>\n
                                    <td class="px-6 py-4">\n
                                      <div class="flex items-center gap-2">\n
                                        <button class="text-primary hover:text-primary/80 p-1" title="编辑">\n
                                          <i class="fa fa-edit"></i>\n
                                        </button>\n
                                        <button class="text-danger hover:text-danger/80 p-1下架-btn" data-id="H001" title="下架">\n
                                          <i class="fa fa-ban"></i>\n
                                        </button>\n
                                        <button class="text-gray-600 hover:text-gray-800 p-1" title="查看详情">\n
                                          <i class="fa fa-eye"></i>\n
                                        </button>\n
                                      </div>\n
                                    </td>\n
                                  </tr>\n
                    `)
            tableData.append(shuju)
          }

        },
        error: function (xhr) {
          // 只有请求不正常（状态码不为200）才会执行
          // console.log("error", xhr);
        },
        // complete: function (xhr) {
        // 不管是成功还是失败都是完成，都会执行这个 complete 函数(一般成功与失败都需要执行的操作写在这里)
        // console.log("complete", xhr);
        // }
      });

    }
    $(function(){
      loadInit("");
      $("#searchBtn").click(function(){
        let searchName=$("#searchName").val();
        if("undefined"==searchName)
          searchName="";
        alert(searchName)
        loadInit(searchName)
      });
    });
  </script>
</body>
</html>
